---
title: Basic Usage
---

import { Card } from '@astrojs/starlight/components'
import Seo from '../../../components/Seo.astro'

<Seo
    seo={{
        title: 'Basic Usage',
        description: 'How to use react-native-unistyles?'
    }}
>

    
:::tip[Did you know?]
The library was designed to keep your components clean. 
You don't need to worry about importing custom components or creating styles based on an opinionated syntax.
:::

After the initial setup, you only need to focus on two functions responsible for your styles:

- `createStyleSheet` which replaces `StyleSheet.create`
- `useStyles` which parses your styles and ensures TypeScript compatibility with media queries and breakpoints

    ```tsx title="Simple example with theming"
    import React from 'react'
    import { View, Text } from 'react-native'
    import { createStyleSheet, useStyles } from 'react-native-unistyles'

    export const ExampleUnistyles = () => {
        const { styles } = useStyles(stylesheet)

        return (
            <View style={styles.container}>
                <Text style={styles.text}>
                    Unistyles example
                </Text>
            </View>
        )
    }

    const stylesheet = createStyleSheet(theme => ({
        container: {
           flex: 1,
           justifyContent: 'center',
           alignItems: 'center',
           backgroundColor: theme.colors.background
        },
        text: {
           color: theme.colors.typography
        }
    }))
    ```
</Seo>
